<template>
  <header class="header can-sticky">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="inner">
            <!-- Logo -->
            <div class="logo">
              <NuxtLink to="/" class="d-flex h-100">
                <img src="~/assets/images/logo-3.png" alt="logo" class="image-fit-contain" />
              </NuxtLink>
            </div>
            <!-- Logo -->
            <!-- Nav -->
            <TheNavigation :class="['navigation', { open: isMenuOpen }]" />
            <!-- Nav -->
            <MobileNav v-model="isMenuOpen" />
          </div>
        </div>
      </div>
    </div>
  </header>
  <!-- Header End -->
  <!-- Subheader Start -->
  <div class="section-bg section-padding subheader" :style="{ backgroundImage: `url(${subheader})` }">
    <!-- <div class="container">
      <div class="row">
        <div class="col-12 text-center">
          <h2 class="text-white page-title">了解一下</h2>
        </div>
      </div>
    </div> -->
  </div>
  <!-- Subheader End -->
  <!-- Service Details Start -->
  <section v-if="expertInfo && expertInfo.data[0]" class="section-padding">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-4">
          <div class="image mb-xl-30">
            <img :src="expertInfo.data[0].avatar" alt="img" class="image-fit" />
          </div>
        </div>
        <div class="col-lg-6">
          <div class="section-header">
            <h3 class="title">{{ expertInfo.data[0].name }}</h3>
          </div>
          <p>
            {{ expertInfo.data[0].content }}
          </p>
        </div>
      </div>
    </div>
  </section>
  <!-- Service Details End -->
  <!-- Footer Start -->
  <TheFooter />

  <!-- Footer End -->
  <!-- Copyright Start -->
  <div class="thm-bg-color-one copyright">
    <div class="container">
      <div class="row">
        <div class="col-12 text-center">
          <p class="mb-0">
            Copyright © <span id="year"></span>.
            <a target="_blank" href="#" title=" 科技创新院" class="text-white">科创研究院</a>
          </p>
        </div>
      </div>
    </div>
  </div>
  <!-- Copyright End -->
  <div data-target="html" class="back-to-top ft-sticky" style="">
    <i class="fal fa-long-arrow-up"></i>
  </div>
</template>

<script setup lang="ts">
import subheader from "../assets/images/subheader.jpg";
import TheNavigation from "~/component/TheNavigation.vue";
import TheFooter from "~/component/TheFooter.vue";
import MobileNav from "~/component/MobileNav.vue";
const isMenuOpen = ref(false);

const route = useRoute();

// 获取成果信息
// const expertInfo = ref<any>({});

const id = computed(() => String(route.params.id));

// 获取成果信息
const config = useRuntimeConfig();

const { data: expertInfo } = await useAsyncData(
  () => `news:${route.params.id}`,
  () => $fetch(`${config.public.baseURLSSR}/api/expert_get_one?id=${id.value}`),
  { watch: [() => route.params.id] }
);
</script>

<style></style>
